<template>
  <div class="page-box">
    <el-form :model="form" label-width="100px" class="form-box" :rules="rules" ref="form">
      <el-form-item label="商品类型:" prop="product_type">
        <el-radio-group v-model="form.product_type">
          <el-radio-button label=0> 普通商品 </el-radio-button>
          <el-radio-button label=1> 虚拟商品 </el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="所属模块:" prop="type">
        <el-select

          clearable
          v-model="form.type"
          placeholder="请选择模块"
          class="ele-block"
          @change="handleAChange"
          style="width: 300px"
          >
          <el-option v-for="item in productItemList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item label="所属商户:" prop="sid">
        <el-select
          clearable
          v-model="form.sid"
          placeholder="请选择商户"
          class="ele-block"
          @change="handleMerchantChange"
          style="width: 300px"
          >
          <el-option v-for="item in merchantList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>



      <el-form-item label="商品名称:" prop="store_name">
        <el-input v-model="form.store_name" maxlength="200" show-word-limit />
      </el-form-item>

      <div class="vertical-center-form">
        <el-form-item label="商品主图:" prop="image">
          <uploadImage :limit="1" v-model="form.image"></uploadImage>
        </el-form-item>
      </div>

      <el-form-item label="单位:" prop="unit">
        <el-input v-model="form.unit" />
      </el-form-item>

      <el-form-item label="让利比例:" prop="profit_sharing_ratio">
        <el-input-number v-model="form.profit_sharing_ratio" :precision="2" :step="0.1" :max="30"></el-input-number>
      </el-form-item>

      <div class="vertical-center-form">
        <el-form-item label="商品轮播图:" prop="slider_image">
          <uploadImage :limit="6" v-model="form.slider_image"></uploadImage>
        </el-form-item>
      </div>

      <div class="vertical-center-form2">
        <el-form-item label="添加视频:">
          <UppyUploader :upload-url="videoUploadUrl" @videoUploadCallback="handleUploadSuccess" :itemUrl = "form.video_link" />
        </el-form-item>
      </div>

      <el-form-item label="商品分类:" prop="cate_id">
        <TreeSelect v-model="form.cate_id"  @handleChangeInput="handleChangeInput"
          @handleNodeChange="handleNodeChange" :data="treeList" @input="val => form.cate_id = val" />
      </el-form-item>

      <el-form-item label="商品状态:" prop="is_up">
        <el-radio-group v-model="form.is_up">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="0">下架</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-button type="primary" @click="submitData" class="bt-fix"> 下一步 </el-button>




  </div>
</template>

<script>
  //import { EventBus } from '@/utils/event-bus';
  import uploadImage from '@/components/uploadImage'
  import TreeSelect from '@/components/TreeSelect.vue';
  import UppyUploader from '@/components/UppyUploader.vue';



  export default {
    props: {
      form: Object
    },
    components: {
      uploadImage,
      TreeSelect,
      UppyUploader
    },
    data() {
      return {
        merchantList:[],
        treeList:[],
        productItemList:[],
        videoUploadUrl: process.env.VUE_APP_API_BASE_URL + '/upload/videoUpload',
        props: {
          label: 'name',
          children: 'zones'
        },
        categoryOptions: [],
        count: 1,
        showTree: false,
        categoryId: null,
        cate_id: 0,
        type:0,
        rules: {
          product_type: [{
            required: true,
            message: '请选择商品类型',
            trigger: 'change'
          }, ],
          type: [{
            required: true,
            message: '请选择所属模块',
            trigger: 'change'
          }, ],
          sid: [{
            required: true,
            message: '请选择商户',
            trigger: 'change'
          }, ],
          cate_id: [{
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }, ],
          is_up: [{
            required: true,
            message: '请选择商品状态',
            trigger: 'change'
          }, ],
          store_name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }, ],
          image: [{
            required: true,
            message: '请输入商品主图',
            trigger: 'blur'
          }],
          unit: [{
            required: true,
            message: '请输入商品单位',
            trigger: 'blur'
          }],
        }
      }
    },
    created(){

      this.cate_id = sessionStorage.getItem('cate_id')*1;
      sessionStorage.removeItem('cate_id');
      this.type = sessionStorage.getItem('goods_type')*1;
      sessionStorage.removeItem('goods_type');


    },
    beforeDestroy() {


    },
    async mounted() {
      console.log('---base--this--form',this.form)
      await this.getMerchantList()
      await this.getProductItemList()
      await this.getTreeList(this.type)


    },
    methods: {
      handleAChange(value) {
          console.log('---handleAChange---',value)
          this.cate_id = 0;
          this.getTreeList(value)
      },

      submitData() {
        let goodsData = {}
        goodsData.sign = '1';
        this.form.isend_base = true;
        this.$refs.form.validate((valid) => {
          if (!valid) {

            return false;
          }
        });
        if (this.cate_id == 0) {
         // this.$message.error('基本信息不完整');
          return false;
        }
        goodsData.form = this.form;
        console.log('send------1', goodsData)
        this.$emit('formChange', goodsData)
      },
      getProductItemList() {
        this.$httpRequest.get('/product/item/list').then(result => {
          if (result.code === 0) {
            this.productItemList=result.data;
          }
        }).catch(e => {
          this.$message.error(e.message)
        });

      },
      getMerchantList() {
        this.$httpRequest.get('/merchant/tpl').then(result => {
          this.merchantList =result;

        }).catch(e => {
          this.$message.error(e.message)
        });

      },

      getTreeList(type=0) {
        this.$httpRequest.get('/product/category/tpl',{type:type}).then(result => {
          this.treeList=result;
        }).catch(e => {
          this.$message.error(e.message)
        });
      },
      handleMerchantChange(data){
        console.log('---handleMerchantChange--', data)
      },

      handleNodeChange(data) {
        console.log('---handleNodeChange---', data)
      },
      handleChangeInput(data) {
        this.cate_id = data
        this.$emit('cateIdChange', data)
      },
      handleUploadSuccess(data) {
        console.log(' handleUploadSuccess-----data', data);
        this.$emit('videoChange', data)
        //this.form.video_link = data.url
      }
    }
  }
</script>

<style>
  .form-box {
    padding-top: 30px;
  }

  .custom-input {
    width: 300px;
  }

  .label-box {
    margin-top: 30px;
  }

  .vertical-center-form {}

  .vertical-center-form .el-form-item__label {
    line-height: 130px !important;
  }

  .vertical-center-form2 .el-form-item__label {
    line-height: 100px !important;
  }



  .ml-2 {
    margin-left: 20px;
  }

  .el-tabs__active-bar {
    width: 74px !important;

  }
</style>
